<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    弹幕JSON文件：<input id="filePicker" class="style_file_content" accept=".json" type="file" />
    关键字配置文件：<input class="style_file_content" accept=".txt" type="file" id="config_file" />
    <input type="button" value="解析" onclick="show()" />
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:680px;">
    </div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option;
        var keywords = ['草', '(´；ω；`)'];
        var legend = keywords;
        legend.unshift("弹幕总数")
        var countData = { "弹幕总数": {} };

        function show() {
            var reader = new FileReader();
            var danmuData = document.getElementById("filePicker").files[0];
            if (null == danmuData) {
                alert("请选择弹幕文件");
                return
            }
            var configData = document.getElementById("config_file").files[0];
            if (configData != null) {
                var configReader = new FileReader();
                configReader.onload = function () {
                    keywords = this.result.split('\r\n')
                    legend = keywords;
                    legend.unshift("弹幕总数")
                }
                configReader.readAsText(configData);
            }
            reader.onload = function () {
                var data = JSON.parse(this.result)
				var xAxis = [];
				var timeIndex = []
                var startTime = (data.info.start_time / 1000 + (60 - data.info.start_time / 1000 % 60)) * 1000
                var endTime = (data.info.end_time / 1000 + (60 - data.info.end_time / 1000 % 60)) * 1000
                for (var index = startTime; index <= endTime; index += 60000) {
                    var date = new Date(index)
                    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                    var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                    var key = h + m + s
                    xAxis.push(key)
                    timeIndex.push(index)
                }
                var tempKey = 0
                for (danmuIndex in data.full_comments) {
                    var danmu = data.full_comments[danmuIndex]
                    if (danmu.gift_name != null) {
                        continue
                    }
                    while (danmu.time > timeIndex[tempKey]) {
                        tempKey += 1
                    }
                    if (null != countData["弹幕总数"][xAxis[tempKey]]) {
                        countData["弹幕总数"][xAxis[tempKey]] = countData["弹幕总数"][xAxis[tempKey]] + 1
                    } else {
                        countData["弹幕总数"][xAxis[tempKey]] = 1
                    }
                    for (keyIndex in keywords) {
                        var text = String(danmu.text)
                        key = keywords[keyIndex]
                        let countNum = 1
                        if (text.indexOf(key) == -1) {
                            countNum = 0
                        }
                        if (null == countData[key]) {
                            countData[key] = {}
                        }
                        if (null != countData[key][xAxis[tempKey]]) {
                            countData[key][xAxis[tempKey]] = countData[key][xAxis[tempKey]] + countNum
                        } else {
                            countData[key][xAxis[tempKey]] = countNum
                        }
                    }
                }
                series = []
                for (let key in countData) {
                    let seriesData = {}
                    seriesData['type'] = 'line'
                    seriesData['name'] = key
                    seriesData['data'] = Object.values(countData[key])
                    series.push(seriesData)
                }
                option = {
                    title: {
                        text: data.info.title
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: legend
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: series
                };

                option && myChart.setOption(option);
            }
            reader.readAsText(danmuData);
        }
    </script>
</body>

</html>